import React, { Component, forwardRef } from 'react'

class Child1 extends Component {
    state = {
        x: 100,
        y: 200
    }
    render() {
        return <div>
            <h2>子组件1-类组件</h2>
            <em ref={x=>this.emBox=x}>100</em>
        </div>
    }
}

const Child2 = forwardRef(function Child2(props, ref) {
    console.log('ref',ref);
    return <div>
        <h2>子组件2-函数组件</h2>
        <button ref={ref}>按钮</button>
    </div>
})

export default class Demo3Ref extends Component {
    render() {
        return (
            <div>
                <h1>父组件</h1>
                <Child1 ref={x=>this.Child1 =x} />
                <Child2 ref={x=>this.Child2 =x} />
                
            </div>
        )
    }
    componentDidMount(){
        console.log(this.Child1);
        console.log(this.Child2);
    }
}

